<template>
    <!--全部商户列表组件，目前封装的不够彻底，下面的列表是无关的内容，应该只是把那个筛选的分离出来。#########将来记得分离一下，目前还没拿到数据-->
    <div class="content">
        <div class="topfixed2">
            <ul class="js-screening-tag">
                <li @click="togglePages(v,i)" :class="{'on':v.selected}" v-for="(v,i) in titlePages">
                    <span>{{v.title}}</span>
                    <i class="icon-down"></i>
                </li>
            </ul>
        </div>
        <div class="bg-gray" style="display: none">
            <div class="none-content">
                <img src="@/assets/images/store-none.png">
                <div class="txt">没有找到你要的商户</div>
            </div>
        </div>
        <div class="bg-gray">
            <div class="itemlist">
                <customerList></customerList>
            </div>
        </div>
        <ul class="js-screening-list">

            <li :class="{'current':isCurrent}">
                <div class="filter-fixed">
                    <ul class="city-ul">
                        <li :class="i==0?'city active':'city'" @click="toggleContent($event,v.categorylast)" v-for="(v,i) in TAGLST" :key="i"><img src="@/assets/images/icon/icon_1.png" width="15" height="15">{{v.labelName}}</li>
                    </ul>
                    <ul class="area-ul">
                        <li @click="hideContent(k)" class="area" v-for="k in categorylast">{{k.categoryName}}<i></i></li>
                    </ul>
                </div>
            </li>

        </ul>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import customerList from '@/components/customerList'
    export default {
        name: "classification",
        components:{customerList},
        computed:{
            ...mapGetters({
                classificationMap:'getClassificationMap',
                selectedCity:'getSelectedCity',//选中的城市
            })
        },
        mounted(){
            var params = {
                //cityId:310100
                cityId:this.selectedCity.cityno
            };
            this.$store.dispatch('loadClassificationData',params);
        },
        methods:{
            //class为s-screening-list的ul标签里的li显示和隐藏
            hideUl(index){
                this.titlePages.forEach((o,i)=>{
                    index==i?o.selected=true:o.selected=false;
                });
            },
            //数据填充到页面
            togglePages(obj,index){
                this.hideUl(index);//class为s-screening-list的ul标签里的li显示和隐藏
                this.isCurrent = true;
                //获取数据渲染classification(联动的控件)
                this.TAGLST = this.classificationMap[obj.key];
                this.categorylast = this.TAGLST[0].categorylast;
            },
            toggleContent(e,obj){
                let li = e.currentTarget;
                for(let i=0,len=li.parentNode.childNodes.length;i<len;i++){
                    li.parentNode.childNodes[i].className = 'city';
                }
                li.className = 'city active';
                //以上操作样式，自己的样式加上active，同级的其它元素则只是city
                this.categorylast = obj;
            },
            hideContent(k){
                //查询数据传k
                this.isCurrent = false;
                this.hideUl(30);//随意填写一个索引，让所有li都不是class=0n
            }
        },
        data(){
            return {
                isCurrent:false,
                titlePages:[
                    {title:'附近',selected:false,key:'NEAR'},
                    {title:'类别',selected:false,key:'TAGLST'},
                    {title:'离我最近',selected:false,key:'NEARTOME'}
                ],
                TAGLST:[],
                categorylast:[]
            }
        }
    }
</script>

<style scoped>
    .topfixed2{
        top:0px;
    }
    .bg-gray{
        top:0px;
    }
    .filter-fixed{
        top:41px;
    }
</style>
